import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { HotRecommendWrapper } from './style'
import ThemeHeaderRcm from '@/components/theme-header-rcm'
import { useAppSelector } from '@/store'
import { shallowEqual } from 'react-redux'
import SongCover from '@/components/song-cover'

const HotRecommend: React.FC<any> = memo((props) => {
  const { history } = props
  const { hotRecommends } = useAppSelector((state) => ({
    hotRecommends: state.recommend.hotRecommends
  }), shallowEqual)
  console.log('hotRecommends', hotRecommends);

  const handleKeyWordClick = (item) => {
    console.log('item');
    history.push(`/discover/songs?albumName=${item}`)

  }
  return (
    <HotRecommendWrapper>
      <ThemeHeaderRcm title="热门推荐" showIcon={true} right='更多'
        keywords={['华语', '流行', '摇滚', '民谣', '电子']}
        keywordsClick={(item) => handleKeyWordClick(item)}>
      </ThemeHeaderRcm>
      <div className="recommend-list-wrapper">
        {hotRecommends &&
          hotRecommends.map((item) => {
            return (
              <SongCover key={item.id} info={item} className="recommend-list">
                {item.name}
              </SongCover>
            )
          })}
      </div>
    </HotRecommendWrapper >
  )
})
export default HotRecommend